<% if action_name != "index" %>
  <% title_tag(@page_title || t('menu.topics')) %>
<% end %>
<!-- @suggest_topics maybe nil or ActiveRecord::Relation, but we need an array -->
<% @suggest_topics = @suggest_topics.to_a %>
<%= render "topics/node_info", node: @node %>
<div class="flex flex-col gap-4 lg:flex-row">
  <div class="grow lg:w-3/4">
    <div class="topics topics-<%= action_name %> card">
      <div class="card-body item-list">
        <% if @suggest_topics.present? %>
          <%= render TopicComponent.with_collection(@suggest_topics, type: "suggest") %>
        <% end %>
        <%= render TopicComponent.with_collection(@topics) %>
      </div>
      <% if  @topics.total_pages > 1 %>
        <div class="clearfix card-footer">
          <% if (action_name.in? %(index recent)) && (controller_name == "topics") %>
            <%= paginate @topics, total_pages: Topic.total_pages %>
          <% else %>
            <%= paginate @topics %>
          <% end %>
        </div>
      <% end %>
    </div>
    <% if current_user %>
      <script type="text/javascript">
        var readed_topic_ids = <%= @read_topic_ids || [] %>;
        for (var i = 0; i < readed_topic_ids.length; i++) {
          topic_id = readed_topic_ids[i];
          $(".topic-"+ topic_id).addClass('topic-visited');
          $(".topic-"+ topic_id + " .count a").addClass("state-true");
        }
      </script>
    <% end %>
  </div>
  <div class="w-full lg:w-1/4">
    <%= render "topics/sidebar_for_topic_index" %>
  </div>
</div>
